<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>


  <style>
    *{
      margin: 0;
      padding: 0;
      list-style: none;
    }
    body{
      width: 100%;
      height: 100%;
      background: #253242;
    }
    /* 大盒子 div标签*/
    .box{
      height: 300px;
      width: 800px;
      margin: 50px auto; /*上下 50px 左右auto auto 可能依赖予浏览器*/
      position: relative;
    }
    /*ul 标签*/
    .box .imgbox{
      height: 250px;
      width: 800px;
      overflow: hidden;/* 在一个框里面 设置了这个属性 超出部分 就会被隐藏， 就是不显示的意思 */
      position: relative;
     /* -webkit-perspective: 1000px; 3D 属性管用 这个属性允许你改变3D元素是怎样查看透视图 我改了不用 3D 所以基本没用*/
    }

    .box .imgbox li{

      position: absolute;
      width: 500px;
      height: 250px;
      transition:all  0.5s linear ;/*过度属性  transition-property为all :所有属性都将获得过渡效果。比如填width 宽获得过度效果 ，过度持续为0.5s
      过度方式 线性过度
      	以始终相同的速度完成整个过渡过程，等同于 cubic-bezier(0,0,1,1)*/
    }
    .box .imgbox li img{
      width: 100%;
      height: 100%;/*若无内外边距 100% 就是其父元素的 width 属性的值， 对应 乘百分比 这里是li 为父元素*/
    }
    /* 左侧图片样式  也就是 li 标签 。从 上面的属性 过度到这里的属性  过度作用*/
    .box .imgbox .img1{
      height: 180px;
      width: 400px;
      top:35px; /*相对父元素 距离35*/
      left:0; /*同理*/
      z-index: 0;/*为了表示三维立体的概念 如显示元素的上下层的叠加顺序引入了z-index属性来表示z轴的区别*/
      opacity: 0.8;/*元素 透明度*/

    }
    /* 中间图片样式 不设置width 和height 就不覆盖 */
    .box .imgbox .img2{
      left: 150px;
      top:0;
      opacity: 1;/*0到1  1 不透明*/
      z-index: 99;
    }
    /* 右侧图片样式 */
    .box .imgbox .img3{
      height: 180px;
      width: 400px;
      left: 700px;
      top:35px;
      opacity: 0.8;


    }

    /* 小圆点 */
    nav{
      width: 100px;
      height: 20px;
      margin: 0 auto;
    }
    nav span{
      width: 7px;
      height: 7px;
      display: inline-block;
      border-radius: 3.5px;
      background: #708090;
      cursor: pointer;
    }
    /* 小圆点选中样式 */
    nav span.select{
      width: 13px;
      background: #fff;
    }

    /* 左右键样式 */
    .btn{
      position: absolute;
      width: 50px;
      height: 50px;
      background:rgba(0,0,0,0.5) ;
      top: 100px;
      color: #fff;
      font-size: 30px;
      line-height: 50px;
      text-align: center;
      display: none;
    }
    .back{
      left: 100px;
    }
    .next{
      right: 100px;
    }






  </style>




</head>
<body>


<div class="box" id="box">
  <ul class="imgbox" id="imgbox">
    <li class="img2" ><img src="https://qpic.y.qq.com/music_cover/sMrfR4xnhvohzZMUw6icQ1aEhk8Y4JAr7ianXVxEN0EVGOUStg8RAL4w/300?n=1" alt=""></li>
    <li class="img1"><img src="https://qpic.y.qq.com/music_cover/vpjBzVwng6HtNMYD3ibc06MAxFQkYZFN6fPZe1BxeXyQ6ab7TuovIicg/300?n=1" alt=""></li>
    <li class="img3"><img src="https://qpic.y.qq.com/music_cover/JicSFUNgC3ZJwbmSsLfadxW5Y4bTDGVXMAQH4ic2vbGFvria2BMpr2deQ/300?n=1" alt=""></li>

  </ul>
  <!-- 左键右键 -->
  <span class="back btn" id="back">&lt;</span>
  <span class="next btn" id="next">&gt;</span>

  <!-- 小圆点 -->
  <nav id='nav'>
    <span class="select"></span>
    <span></span>
    <span></span>
  </nav>

</div>


<script>
  var box = document.getElementById('box')  //获取大盒子div
  var imgbox = document.getElementById('imgbox')  //获取图片盒子ul
  var img = imgbox.children //获取3张图片 ul下面的 li标签 这是个数值

  var back = document.getElementById('back') //获取左右键
  var next = document.getElementById('next') //获取左右键
  var navspan = document.getElementById('nav').children  //获取小圆点

  var num = 1 //默认第一个小圆点亮起,用户控制哪一个小圆点亮起
  var onOff = true //开关,当前是否能点击,防止点击过快的bug
  var timer = null //定义定器
  var classarr = ['img2','img1','img3']  //三种图片样式 数值里面是 class属性值

  //鼠标悬停图片层显示左右按钮
  box.onmouseover = function (){
    back.style.display = 'block'
    next.style.display = 'block'
    clearInterval(timer) //取消定时器  停止自动切换
  }
  //鼠标离开图片层隐藏左右按钮
  box.onmouseout = function (){
    back.style.display = 'none'
    next.style.display = 'none'
    timer = setInterval(nextImg,3000)  //重新开启定时器,自动切换
  }

  // 下一张按钮点击
  next.onclick = function (){
    if(onOff){
      onOff = false; //此时不可再次切换图片
      nextImg()      //调用切换下一张的函数
      setTimeout(function(){
        onOff = true
      },500)        //0.5s后可以再次切换,0.5s与动画时间一致
    }

  }
  // 上一张按钮点击
  back.onclick = function (){
    if(onOff){
      if(num >1){
        num--
      }else{
        num = 3
      }
      onOff = false;
      removenav(navspan[num-1])
      var lastValue = classarr.pop();  //删数值最后一个元素 ，并返回这个值 每个li 标签的属性
      classarr.unshift(lastValue);     //添加到数组头部
      //for循环遍历每一个li，逐个替换class
      for(var i = 0 ; i < classarr.length; i++){
        img[i].className = classarr[i];
      };
      setTimeout(function(){
        onOff = true
      },500)
    }

  }
  // 自动下一张
  timer = setInterval(nextImg,2500)

  // 切换下一张函数
  function nextImg(){
    if(num <3){/*循环 到3 应该是第一张*/
      num++
    }else{
      num = 1
    }
    removenav(navspan[num-1]) //改变圆点样式
    var fistValue = classarr.shift(); //取数组第一个值
    classarr.push(fistValue); //添加到数组最后
    //for循环遍历每一个li，逐个替换class
    for(var i = 0 ; i < classarr.length; i++){
      img[i].className = classarr[i];
    };
  }

  //修改圆点样式函数
  function removenav(obj){ //修改圆点样式
    for(var i = 0;i < navspan.length; i++){
      navspan[i].className = ''  //清除所有圆点样式
    }
    obj.className = 'select'
  }





</script>

</body>
</html>